<template>
    <div class="trainContent">
      <el-breadcrumb separator="/" class="breadcrumb-bottom">
        <el-breadcrumb-item>专业培养方案</el-breadcrumb-item>
        <el-breadcrumb-item>培养内容</el-breadcrumb-item>
        <el-breadcrumb-item>课程列表</el-breadcrumb-item>
      </el-breadcrumb>

      <el-form :model="trainContentForm" ref="trainContentForm" label-width="0px">
        <el-row :gutter="20">
          <el-col :span="6">
              <el-select v-model="trainContentForm.academicYear" placeholder="请选择 学年" class="max-width">
               <el-option
                  v-for="item in yearList"
                  :label="item.yearName"
                  :value="item.yearID">
               </el-option>
              </el-select>
          </el-col>
          <el-col :span="6">
              <el-select v-model="trainContentForm.term" placeholder="请选择学期">
            	<el-option label="01" value="01"></el-option>
            	<el-option label="02" value="02"></el-option>
          	  </el-select>
          </el-col>
          <el-col :span="6" class="overflow-clear">
            <el-button type="primary" @click="res" class="float-right">立即搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
      <hr>

      <div>
        <div class="float-left table-title-before">
          专业培养内容管理
        </div>
        	
          <el-button type="primary" @click.native.prevent="toAdd()" style="margin-bottom:4px;" class="float-right">新增内容</el-button>
      </div>

      <el-table
        :data="trainContentTable"
        border
        style="width: 100%">
        <el-table-column
          prop="courseNameCN"
          label="课程名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="credit"
          label="学分"
          width="180">
        </el-table-column>
        <el-table-column
          prop="courseHour"
          label="学时"
          width="180">
        </el-table-column>
        <el-table-column
          prop="weeklyHour"
          label="学时分配方式及时长"
          width="180">
        </el-table-column>
        <el-table-column
          label="每周学时分配">
          <el-table-column
            prop="teachHour"
            label="讲课">
          </el-table-column>
          <el-table-column
            prop="computerHour"
            label="上机">
          </el-table-column>
          <el-table-column
            prop="experimentHour"
            label="实验">
          </el-table-column>
          <el-table-column
            prop="practiceHour"
            label="实践">
          </el-table-column>
        </el-table-column>

        <el-table-column
          prop="scoringWay"
          label="计分方式"
          width="180">
        </el-table-column>

        <el-table-column
          prop="address"
          label="操作">
          <template scope="scope">
           <el-button @click.native.prevent="updateCourse(scope.row.trainingCourseID)" type="text">
           		 修改
           </el-button>
           <el-button
            @click.native.prevent="deleteCourse(scope.$index,trainProgramTable,scope.row.trainingCourseID)"
            type="text">
           		 删除
          </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<style>
</style>
<script>
    export default{
        name: 'trainContent',
        data(){
            return{
                trainContentForm:{
                	academicYear:'',
                	term:'',
                	trainingSchemeID:''
                },
                trainContentTable: [],
                yearList:[]
            }
        },
        components:{
        },
        mounted() {
          this.res();
          this.getYearList();
	    },
        methods: {
        	toAdd(){
        		var trainingSchemeID = this.$route.query.trainingSchemeID;
        		alert(trainingSchemeID);
        		this.$router.push({path: 'TrainPlanStuff', query: {trainingSchemeID: trainingSchemeID}})
        	},
        	getYearList(){
        		this.$http.get(`http://localhost:8080/TeachingMIS/common/getAcademicYear`)
		          .then((res) => {
		            console.log(res)
		            this.yearList = res.body
		          }, (err) => {
		            // 响应错误回调
		            //console.log(err)
		          })
      		},
            res(){
			    var trainingSchemeID = this.$route.query.trainingSchemeID;
			    this.trainContentForm.trainingSchemeID = trainingSchemeID;
		        this.$http.post(`http://localhost:8080/TeachingMIS/trainingCourse/getCourseList`, this.trainContentForm).then((res) => {
		          // 响应成功回调
		          console.log(res.body)
		          this.trainContentTable = res.body;
		        }, (err) => {
		          // 响应错误回调
		          console.log("服务器异常！");
		        })
		     },
		     updateCourse(trainingCourseID){
	        	this.$router.push({path: 'TrainPlanStuff', query: {trainingCourseID: trainingCourseID}})
	      	 },
             deleteCourse(index, rows, trainingCourseID){
		        rows.splice(index, 1)
		        this.delete(trainingCourseID)
		    },
		    delete(trainingCourseID){
		        this.$http.post(`http://localhost:8080/TeachingMIS/trainingCourse/deleteCourse`, {
		          trainingCourseID: trainingCourseID
		        })
		          .then((res) => {
		            console.log('删除成功')
		            alert('删除成功')
		          }, (err) => {
		            console.log('服务器异常')
		            alert('删除失败')
		          })
		    },
            
                
        }
    }
</script>
